<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://hol.com/functions" prefix="hfn"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html>
<head>
<base href="${path}/background/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>联盟之家后台管理</title>
<link rel="stylesheet" href="${path}/layui/css/layui.css">
</head>
<body>
	
<div class="layui-fluid">
	<div class="layui-form" style="margin-top: 10px">
		<input type="hidden" name="heroId" value="${hero.heroId}">
  		<div class="layui-form-item">
    		<label class="layui-form-label">英雄名称</label>
    		<div class="layui-input-block">
      			<input type="text" name="heroName" value="${hero.heroName}" lay-verify="required" placeholder="请输入英雄姓名" autocomplete="off" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn" id="imgbtn1">
  					<i class="layui-icon">&#xe67c;</i> 上传英雄头像  					
				</button>
				<span id="imgpath1" style="margin-left:20px;">
					<c:if test="${!empty hero.heroFirPic}">
						<a target="_blank" href="${hero.heroFirPic}">${hero.heroFirPic}</a>
					</c:if>
				</span>
				<input type="hidden" name="heroFirPic" id="heroFirPic" value="${hero.heroFirPic}">
    		</div>
  		</div> 
  		<div class="layui-form-item ">
    		<label class="layui-form-label">英雄类型</label>
    		<div class="layui-input-block">
      			<select name="heroTypeId" lay-verify="required">      				
			       	<c:forEach var="d" items="${hfn:dict('英雄类型')}">         		
      				<option value="${d.itemId}" <c:if test="${d.itemId==hero.heroTypeId}">selected</c:if>>${d.itemValue}</option>
      				</c:forEach>  
			  	</select>
    		</div>
  		</div>
  		<div class="layui-form-item ">
    		<label class="layui-form-label">英雄起源地</label>
    		<div class="layui-input-block">
      			<select name="heroHomeId" lay-verify="required">      				
			       	<c:forEach var="d" items="${hfn:dict('英雄势力')}">         		
      				<option value="${d.itemId}" <c:if test="${d.itemId==hero.heroHomeId}">selected</c:if>>${d.itemValue}</option>
      				</c:forEach>  
			  	</select>
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn" id="imgbtn2">
  					<i class="layui-icon">&#xe67c;</i> 上传英雄海报				
				</button>
				<span id="imgpath2" style="margin-left:20px;">
					<c:if test="${!empty hero.heroSecPic}">
						<a target="_blank" href="${hero.heroSecPic}">${hero.heroSecPic}</a>
					</c:if>
				</span>
				<input type="hidden" name="heroSecPic" id="heroSecPic" value="${hero.heroSecPic}">
    		</div>
  		</div>  		
  		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">英雄背景介绍</label>
    		<div class="layui-input-block">
      			<textarea name="heroSecIntro" id="heroSecIntro" style="display:none;" class="layui-textarea">${hero.heroSecIntro}</textarea>
    		</div>
  		</div>
  			<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn" id="imgbtn3">
  					<i class="layui-icon">&#xe67c;</i> 上传英雄被动技能图片				
				</button>
				<span id="imgpath3" style="margin-left:20px;">
					<c:if test="${!empty hero.heroThiPic}">
						<a target="_blank" href="${hero.heroThiPic}">${hero.heroThiPic}</a>
					</c:if>
				</span>
				<input type="hidden" name="heroThiPic" id="heroThiPic" value="${hero.heroThiPic}">
    		</div>
  		</div>  		
  		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">英雄被动技能介绍</label>
    		<div class="layui-input-block">
      			<textarea name="heroThiIntro" id="heroThiIntro" style="display:none;" class="layui-textarea">${hero.heroThiIntro}</textarea>
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn" id="imgbtn4">
  					<i class="layui-icon">&#xe67c;</i> 上传英雄Q技能图片				
				</button>
				<span id="imgpath4" style="margin-left:20px;">
					<c:if test="${!empty hero.heroFouPic}">
						<a target="_blank" href="${hero.heroFouPic}">${hero.heroFouPic}</a>
					</c:if>
				</span>
				<input type="hidden" name="heroFouPic" id="heroFouPic" value="${hero.heroFouPic}">
    		</div>
  		</div>  		
  		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">英雄Q技能介绍</label>
    		<div class="layui-input-block">
      			<textarea name="heroFouIntro" id="heroFouIntro" style="display:none;" class="layui-textarea">${hero.heroFouIntro}</textarea>
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn" id="imgbtn5">
  					<i class="layui-icon">&#xe67c;</i> 上传英雄W技能图片				
				</button>
				<span id="imgpath5" style="margin-left:20px;">
					<c:if test="${!empty hero.heroFivPic}">
						<a target="_blank" href="${hero.heroFivPic}">${hero.heroFivPic}</a>
					</c:if>
				</span>
				<input type="hidden" name="heroFivPic" id="heroFivPic" value="${hero.heroFivPic}">
    		</div>
  		</div>  		
  		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">英雄W技能介绍</label>
    		<div class="layui-input-block">
      			<textarea name="heroFivIntro" id="heroFivIntro" style="display:none;" class="layui-textarea">${hero.heroFivIntro}</textarea>
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn" id="imgbtn6">
  					<i class="layui-icon">&#xe67c;</i> 上传英雄E技能图片				
				</button>
				<span id="imgpath6" style="margin-left:20px;">
					<c:if test="${!empty hero.heroSixPic}">
						<a target="_blank" href="${hero.heroSixPic}">${hero.heroSixPic}</a>
					</c:if>
				</span>
				<input type="hidden" name="heroSixPic" id="heroSixPic" value="${hero.heroSixPic}">
    		</div>
  		</div>  		
  		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">英雄E技能介绍</label>
    		<div class="layui-input-block">
      			<textarea name="heroSixIntro" id="heroSixIntro" style="display:none;" class="layui-textarea">${hero.heroSixIntro}</textarea>
    		</div>
  		</div>
		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn" id="imgbtn7">
  					<i class="layui-icon">&#xe67c;</i> 上传英雄R技能图片				
				</button>
				<span id="imgpath7" style="margin-left:20px;">
					<c:if test="${!empty hero.heroSevPic}">
						<a target="_blank" href="${hero.heroSevPic}">${hero.heroSevPic}</a>
					</c:if>
				</span>
				<input type="hidden" name="heroSevPic" id="heroSevPic" value="${hero.heroSevPic}">
    		</div>
  		</div>  		
  		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">英雄R技能介绍</label>
    		<div class="layui-input-block">
      			<textarea name="heroSevIntro" id="heroSevIntro" style="display:none;" class="layui-textarea">${hero.heroSevIntro}</textarea>
    		</div>
  		</div>
  		   			
  		
  		<div class="layui-form-item layui-hide">
	      	<input type="button" lay-submit lay-filter="lay-form-submit" id="lay-form-submit">
	    </div>
 	</div>
 	
  
  	<script src="../layui/layui.js"></script>
	<script>
	layui.use(['form',  'upload', 'layedit'], function(){
		var form = layui.form;
		var $ = layui.$;
		var upload = layui.upload;
		var layedit = layui.layedit;
		
	
		//文件上传
		upload.render({
			elem: '#imgbtn1',
			url: '${path}/api/upload',
			done: function(resp) {
				if(resp.success) {
					$('#heroFirPic').val(resp.data.src);
					$('#imgpath1').html('<a target="_blank" href="'+resp.data.src+'">'+resp.data.title+'</a>');
				}	
			}			
		});
		upload.render({
			elem: '#imgbtn2',
			url: '${path}/api/upload',
			done: function(resp) {
				if(resp.success) {
					$('#heroSecPic').val(resp.data.src);
					$('#imgpath2').html('<a target="_blank" href="'+resp.data.src+'">'+resp.data.title+'</a>');
				}	
			}			
		});
		upload.render({
			elem: '#imgbtn3',
			url: '${path}/api/upload',
			done: function(resp) {
				if(resp.success) {
					$('#heroThiPic').val(resp.data.src);
					$('#imgpath3').html('<a target="_blank" href="'+resp.data.src+'">'+resp.data.title+'</a>');
				}	
			}			
		});
		upload.render({
			elem: '#imgbtn4',
			url: '${path}/api/upload',
			done: function(resp) {
				if(resp.success) {
					$('#heroFouPic').val(resp.data.src);
					$('#imgpath4').html('<a target="_blank" href="'+resp.data.src+'">'+resp.data.title+'</a>');
				}	
			}			
		});
		upload.render({
			elem: '#imgbtn5',
			url: '${path}/api/upload',
			done: function(resp) {
				if(resp.success) {
					$('#heroFivPic').val(resp.data.src);
					$('#imgpath5').html('<a target="_blank" href="'+resp.data.src+'">'+resp.data.title+'</a>');
				}	
			}			
		});
		upload.render({
			elem: '#imgbtn6',
			url: '${path}/api/upload',
			done: function(resp) {
				if(resp.success) {
					$('#heroSixPic').val(resp.data.src);
					$('#imgpath6').html('<a target="_blank" href="'+resp.data.src+'">'+resp.data.title+'</a>');
				}	
			}			
		});
		upload.render({
			elem: '#imgbtn7',
			url: '${path}/api/upload',
			done: function(resp) {
				if(resp.success) {
					$('#heroSevPic').val(resp.data.src);
					$('#imgpath7').html('<a target="_blank" href="'+resp.data.src+'">'+resp.data.title+'</a>');
				}	
			}			
		});
		//富文本框
		layedit.set({
  			uploadImage: {url: '${path}/api/upload'}
		});
		var editIdx1 = layedit.build('heroSecIntro');
		var editIdx2 = layedit.build('heroThiIntro');
		var editIdx3 = layedit.build('heroFouIntro');
		var editIdx4 = layedit.build('heroFivIntro');
		var editIdx5 = layedit.build('heroSixIntro');
		var editIdx6 = layedit.build('heroSevIntro');
		
		//监听提交
    	form.on('submit(lay-form-submit)', function(data) {
    		// 将富文本框中的内容，赋值给content文本域
    		data.field.heroSecIntro = layedit.getContent(editIdx1);
    		data.field.heroThiIntro = layedit.getContent(editIdx2);
    		data.field.heroFouIntro = layedit.getContent(editIdx3);
    		data.field.heroFivIntro = layedit.getContent(editIdx4);
    		data.field.heroSixIntro = layedit.getContent(editIdx5);
    		data.field.heroSevIntro = layedit.getContent(editIdx6);
    		
    		
      		var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引  
      		//提交ajax成功后，关闭当前弹层并重载表格
      		$.post('${path}/action/hero/save', data.field, function(json) {
      				parent.layui.table.reload('lay-table'); //重载表格
      	      		parent.layer.close(index); //再执行关闭      				
      			}, 'JSON');
    	});
		
	});	
	
	</script>
</div>

</body>
</html>

